<template>
  <div :class="classes" @click="!disabled&&$emit('click')">
    <span v-if="label" class="action-label">{{label}}</span>
    <CommonIcon
      v-if="icon"
      :style="styles"
      :type="icon"
      :color="iconColor"
      :size="size"
    />
    <span v-if="content">{{content}}</span>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "ActionButton",
  props: {
    // 禁用鼠标悬停效果
    disHover: {
      type: Boolean,
      default: () => false,
    },
    icon: {
      type: String,
    },
    iconColor: {
      type: String,
    },
    size: {
      type: Number,
      default: () => 32,
    },
    label: {
      type: String,
    },
    content: {
      type: String,
    },
    disabled: {
      type: Boolean,
      default: () => false,
    },
    transform: {
      type: String,
    },
    active: {
      type: Boolean,
      default: () => false,
    },
    inLine: {
      type: Boolean,
      default: () => false,
    },
  },
  computed: {
    classes() {
      return {
        "action-button": true,
        "action-hoverable": !this.disHover,
        "action-disable": this.disabled,
        "action-active": this.active,
        "action-inline": this.inLine,
        "action-flex": !this.inLine,
      };
    },
    styles() {
      return {
        transform: this.transform,
      };
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../../../assets/styles/theme.less";
.action {
  &-inline {
    display: inline-flex;
  }
  &-flex {
    display: flex;
  }
  &-button {
    padding: 8px;
    height: inherit;
    align-items: center;
    justify-items: center;
    user-select: none;
    color: @title-color;
    position: relative;

    &.action-disable {
      opacity: 0.3;
      cursor: no-drop;

      color: #999;
      filter: grayscale(100%);
      background-color: #fbfbfb;
    }

    &.action-active::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background-color: @primary-color;
    }

    & svg,
    & i {
      transition: transform 0.2s ease;
      & + * {
        margin-left: 6px;
      }
    }

    &.left-border:before {
      content: "";
      position: absolute;
      left: 0;
      top: 8px;
      bottom: 8px;
      width: 1px;
      background-color: @border-color-base;
    }
  }

  &-label {
    display: flex;
    align-items: center;
    margin-right: 8px;
    word-break: keep-all;
  }

  &-desc {
    color: @disable-color;
    font-size: 12px;
    font-weight: 400;
    font-style: italic;
  }

  &-hoverable:not(.action-disable) {
    cursor: pointer;

    &:hover:not(:active):not(.action-active) {
      background-color: tint(@background, 20%);
    }

    &:active:not(.action-active) {
      background-color: shade(@background, 5%);
    }
  }
}
</style>
